<template>
	<view class="containerMine">
		<view class="cmineHead">
			<u-avatar size="large" src="/static/company.png"></u-avatar>
			<view class="cmineContent">
				<view class="cmineTitle">
					<text>{{ userInfo.name }}</text>
				</view>
				<view class="ssCompany">
					<text>{{ userInfo.company }}</text>
				</view>
				<view class="cmineAccount">
					<text>账号：{{ userInfo.accountName }}</text>
				</view>
			</view>
		</view>
		<view class="hanldBox">
			<view class="function-list-item" @click="navTo('/pages/logisticsCompany/resetPwds/resetPwds')">
				<view class="function-list-item-left">
					<image class="function-list-item-left-img" src="/static/sage.png" mode="widthFix"></image>
					<text class="function-list-item-left-text">修改密码</text>
				</view>
				<view class="function-list-item-right">
					<text class="item-right-text"></text>
					<image class="item-right-icon" src="/static/rightIcon.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="lines"></view>

			<view class="loginOut">
				<u-button class="ubtrnitem" type="primary" @click="loginOut">退出登陆</u-button>
			</view>

			<!-- <view class="lines"></view>
			<view class="function-list-item" @click="navTo('/pages/logisticsCompany/myDeclaration/myDeclaration')">
				<view class="function-list-item-left">
					<image class="function-list-item-left-img" src="/static/log.png" mode="widthFix"></image>
					<text class="function-list-item-left-text">填报记录</text>
				</view>
				<view class="function-list-item-right">
					<text class="item-right-text"></text>
					<image class="item-right-icon" src="/static/rightIcon.png" mode="widthFix"></image>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
import useStore from '@/store';
import { storeToRefs } from 'pinia';
import { navTo } from '@/common/utils.js';
import { notLogin } from '../../../../common/httpInterception';
// 公司全局状态管理器
const { useLogisicsCompany } = useStore();
// state
const { userInfo }: any = storeToRefs(useLogisicsCompany);

const loginOut = () => {
	notLogin({
		title: '提示',
		showCancel: true,
		content: '确认退出吗?',
		cancelText: '取消',
		confirmText: '确定'
	});
};

// console.log('userInfo ========> ', userInfo);
</script>

<style scoped lang="scss">
.containerMine {
	.cmineHead {
		padding: 30rpx;
		display: flex;
		border: 10rpx solid #f2f2f2;

		.cmineContent {
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.cmineTitle {
				font-size: 30rpx;
				font-weight: bold;
			}

			.ssCompany {
				// border: 1rpx solid red;
				border-radius: 30rpx;
				padding: 4rpx;
				margin: 5rpx 0;
				font-size: 20rpx;
				text-align: center;
				background-color: #f3f3f3;
			}

			.cmineAccount {
			}
		}
	}

	.hanldBox {
		.function-list-item {
			display: flex;
			flex-direction: row;
			flex: 1;
			justify-content: space-between;
			align-items: center;
			height: 110rpx;
			padding-left: 30rpx;

			.function-list-item-left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.function-list-item-left-img {
					width: 50rpx;
					height: 50rpx;
					margin-right: 22rpx;
				}

				.function-list-item-left-text {
					font-size: 31rpx;
				}
			}

			.function-list-item-right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.item-right-text {
					font-size: 25rpx;
					color: #a7a7a7;
					margin-right: 10rpx;
				}

				.item-right-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;
					transform: rotateY(180deg);
				}
			}
		}

		.lines {
			height: 10rpx;
			background-color: #f2f2f2;
		}

		.function-list-hover {
			background: red;
		}
	}

	.loginOut {
		width: 673rpx;
		margin-left: 39rpx;
		margin-top: 90rpx;
		border: 0;

		.ubtrnitem {
			border: 0;
			color: #f1f1f1;
		}
	}
}
</style>
